<template>
    <layout title="康来当日达-冷链服务">
        <div class="wrapper">
            <van-form @submit="onSubmit" class="form">
                <van-field
                    name="doctorName"
                    label="医生姓名"
                    v-model.trim="formData.doctorName"
                    required
                    placeholder="请输入医生姓名"
                    @input="$Utils.validateValue(formData,'doctorName')"
                    :rules="[{ required: true, message: '请填写医生姓名' }]">

                </van-field>
                <van-field
                    name="doctorPhone"
                    label="医生电话"
                    v-model.trim="formData.doctorPhone"
                    required
                    placeholder="请输入医生电话"
                    :rules="[{ required: true, message: '请填写手机号' },{pattern:/^\d{11}$/,message:'手机号格式错误'}]"
                    >
                </van-field>
                <van-field
                    name="patientName"
                    label="患者姓名"
                    v-model.trim="formData.patientName"
                    @input="$Utils.validateValue(formData,'patientName')"
                    required
                    placeholder="请输入患者姓名"
                    :rules="[{ required: true, message: '请输入患者姓名' }]">
                    
                </van-field>
                <van-field
                    name="patientPhone"
                    label="患者电话"
                    v-model.trim="formData.patientPhone"
                    required
                    placeholder="请输入患者电话"
                    :rules="[{ required: true, message: '请填写手机号' },{pattern:/^\d{11}$/,message:'手机号格式错误'}]">
                    
                </van-field>

                <van-field
                    name="expectedTime"
                    label="期望时间"
                    :value="formData.expectedTime"
                    required
                    placeholder="请选择时间"
                    :rules="[{ required: true, message: '请选择时间' }]"
                    @click="timePickVisible= true">

                </van-field>
                <van-field
                    name="city"
                    label="收样省市"
                    :value="formData.city"
                    required
                    placeholder="请选择省市"
                    :rules="[{ required: true, message: '请选择省市' }]"
                    @click="cityPickerVisible=true"
                   >

                </van-field>
                <van-field
                    name="district"
                    label="收样区域"
                    :value="formData.district"
                    required
                    placeholder="请选择区域"
                    :rules="[{ required: true, message: '请选择省市' }]"
                    @click="showDistrictPicker"
                    >

                </van-field>
                <van-field
                    class="price"
                    name="price"
                    label="预计价格"
                    :value="formData.price"
                    placeholder="选择省市和区域后价格会显示"
                    readonly>

                </van-field>
                <div class="tip">价格仅供参考，具体价格根据收样人员为标准</div>

                <van-field
                    name="address"
                    type="textarea"
                    rows="2"
                    autosize
                    show-word-limit
                    maxlength="50"
                    placeholder="请输入详细地址"
                    required
                    label="详细地址"
                    clearable
                    v-model="formData.address"
                    :rules="[{required:true,message:'请填写详细地址'}]">

                </van-field>
                <van-field
                    name="remark"
                    type="textarea"
                    autosize
                    label="备注"
                    clearbale
                    v-model="formData.remark">

                </van-field>
                <div class="btn">
                    <van-button type="info" block round native-type="submit">
                        提 交
                    </van-button>
                </div>
            </van-form>
        </div>
        <!-- 时间弹框 -->
        <van-popup v-model="timePickVisible" position="bottom" round>
            <van-datetime-picker
                v-model="expectedTime"
                type="datetime"
                title="选择时间"
                :formatter="formatDatetime"
                @confirm="confirmTime"
                @cancel="timePickerVisible = false"
                >
            </van-datetime-picker>
        </van-popup>
        <!-- 省市弹框 -->
        <van-popup v-model="cityPickerVisible" position="bottom" round>
            <van-picker
                show-toolbar
                :columns="cityList"
                value-key="label"
                title="选择省市"
                @confirm="confirmCity"
                @cancel="cityPickerVisible = false"
                >
            </van-picker>
        </van-popup>

         <!-- 区域弹框 -->
         <van-popup v-model="districtPickerVisible" position="bottom" round>
            <van-picker
                show-toolbar
                :columns="districtList"
                value-key="label"
                title="选择区域"
                @confirm="confirmDistrict"
                @cancel="districtPickerVisible = false"
                >
            </van-picker>
        </van-popup>
    </layout>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import addReportApi from "@/api/addReport"
export default {
    name: "addReport",
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            timePickVisible:false,
            cityPickerVisible:false,
            districtPickerVisible:false,
            // 这个是展示的时间
            expectedTime:new Date(),
            // 这个市城市对应的value
            cityValue:"",
            // district:"",
            formData:{
                doctorName:"",
                doctorPhone:"",
                patientName:"",
                patientPhone:"",
                expectedTime:"",
                city:"",
                district:"",
                price:"",
                address:"",
                remark:"",
            },
            cityList:[
                {value:0,label:"长沙市"},
                {value:1,label:"株洲市"},
                {value:2,label:"湘潭市"},
                {value:3,label:"益阳市"},
                {value:4,label:"岳阳市"},
                {value:5,label:"常德市"},
                {value:6,label:"娄底市"},
                {value:7,label:"衡阳市"},
                {value:8,label:"邵阳市"},
                {value:9,label:"永州市"},
                {value:10,label:"怀化市"},
                {value:11,label:"湘西土家在族苗族自治州"},
                {value:12,label:"郴州市"},
                {value:13,label:"张家界市"},
            ],
            districtList:[],
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        // 时间选择确认
        confirmTime(value){
            this.formData.expectedTime = this.$Utils.formatDatetime(value)
            this.timePickVisible = false
        }, 
        // 决定是否展示区域选额弹框
        showDistrictPicker(){
            if(!this.formData.city&&this.formData.city!==0){
                this.$dialog.alert({
                    title:"提示",
                    message:"请先选择省市",
                })
                return
            }

            this.districtPickerVisible = true
        },
        // 省市选择确认
        confirmCity(value){
            this.formData.city = value.label
            this.cityValue = value.value
            
            // 记住这里要清空区域数据和价格
            this.formData.district = ""
            this.formData.price = ""
            this.districtList = this.getDistrict(this.cityValue)
            this.cityPickerVisible = false

        },
        // 区域选择确认
        confirmDistrict(value){
            this.formData.district = value
            this.districtPickerVisible = false
            this.getPrice()
        },
        // 获取价格
        getPrice(){
            let city = this.cityValue
            let district = this.formData.district
            let price = 0
            if(city==0){
                price = 50
                if(district=="其他"){
                    price+=70
                }
            }else if(1<=city&&city<=3){
                price =  120
                if(district=="其他"){
                    price+=60
                }
            }else if(4<=city&&city<=7){
                price = 160
                if(district=="其他")[
                    price+=60
                ]
            }else if(8<=city&&city<=13){
                price = 200
                if(district=="其他")[
                    price+=60
                ]
            }

            this.formData.price = price
        },

        // 获取区域
        getDistrict(index){
            switch(index){
                case 0:
                    return ["岳麓区","芙蓉区","天心区","开福区","雨花区","望城区","长沙县","其他"]; //长沙
                case 1:
                    return ["天元区","荷塘区","芦淞区","石峰区","禄口区","其他"];//株洲
                case 2:
                    return ["岳塘区","雨湖区","其他"];//湘潭
                case 3:
                    return ["赫山区","资阳区","其他"]; //益阳
                case 4:
                    return ["岳阳楼区","君山区","云溪区","其他"];//岳阳
                case 5:
                    return ["武陵区","鼎城区","其他"];// 常德
                case 6:
                    return ["娄星区","其他"];// 娄底
                case 7:
                    return ["蒸湘区","雁峰区","珠晖区","石鼓区","南岳区","其他"];// 衡阳
                case 8:
                    return ["大祥区","双清区","北塔区","其他"];//邵阳
                case 9:
                    return ["冷水滩区","零城区","其他"];//永州
                case 10:
                    return ["鹤城区","其他"];//怀化
                case 11:
                    return ["吉首市","其他"];// 湘西
                case 12:
                    return ["北湖区","苏仙区","其他"];// 郴州
                case 13:
                    return ["永定区","武陵源区","其他"];// 张家界
                default:
                    return []
            }
        },
        // 格式化时间与elementui不同
        formatDatetime(type,val){
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            return val;
        },
        // 提交
        onSubmit(){
            let params = {
                doctorName:this.formData.doctorName,
                doctorPhone:this.formData.doctorPhone,
                patientName:this.formData.patientName,
                patientPhone:this.formData.patientPhone,
                expectedTime:this.formData.expectedTime,
                city:this.formData.city,
                district:this.formData.district,
                address:this.formData.address,
                price:this.formData.price,
                remark:this.formData.remark,
                itemName:"康来当日达"
            }
            // 时间还需要格式化一下
            params.expectedTime = params.expectedTime.split(" ").join("T")

            this.$dialog.confirm({
                title:"提示",
                message:"确定提交吗？"
            }).then(res=>{
                addReportApi.add(params)
                    .then(res=>{
                        if(res.status==0){
                            this.$dialog.alert({
                                title:"提示",
                                message:res.data.message
                            })
                        }else{
                            this.$dialog.alert({
                                title:"提示",
                                message:res.msg
                            })
                        }
                    })
                    .catch(err=>{
                        this.$dialog.alert({
                            title:"错误",
                            message:err
                        })
                    })
            })
            
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.wrapper{
    overflow: hidden;
    background-color: white;
    width: 93%;
    margin: auto;
    border-radius: 10px;
    box-shadow:  0 0 12px rgba(0, 0, 0, 10%);
    .form{
        .price{
            &::v-deep input{
                color:red
            }
        }
        .tip{
            color: #B2B2B2;
            font-size: 13px;
            padding-left: 14px;
        }
        .btn{
            margin: 20px;
        }
    }
}

</style>